<template>
  <div class="container">
    <el-card class="box-card">
      <!-- 头部搜索输入框 -->
      <div class="clearfix">
        <div style="flex: 1">
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="学科名称" prop="name">
              <el-input v-model="form.name" placeholder="请输入学科"></el-input>
              <el-button
                style="margin-left: 20px"
                @click="$refs.form.resetFields()"
                >清除</el-button
              >
              <el-button type="primary" @click="onSubmit">搜索</el-button>
            </el-form-item>
          </el-form>
        </div>
        <!-- 新增学科按钮 -->
        <div>
          <el-button
            type="success"
            icon="el-icon-edit"
            @click="dialogVisible = true"
            >新增学科</el-button
          >
        </div>
      </div>

      <!-- 提示总数据 -->
      <el-alert :title="alertText" type="info" show-icon class="el-alert">
      </el-alert>

      <!-- 学科数据表格 -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="index" :index="indexMethod" label="序号">
        </el-table-column>
        <el-table-column prop="subjectName" label="学科名称"> </el-table-column>
        <el-table-column prop="username" label="创建者"> </el-table-column>
        <el-table-column prop="addDate" label="创建日期" width="200">
          <template v-slot="{ row }">
            {{ row.addDate | parseTimeByString() }}
          </template>
        </el-table-column>
        <el-table-column
          prop="isFrontDisplay"
          label="前台是否显示"
          :formatter="frontDisplay"
        >
        </el-table-column>
        <el-table-column prop="twoLevelDirectory" label="二级目录">
        </el-table-column>
        <el-table-column prop="tags" label="标签"> </el-table-column>
        <el-table-column prop="totals" label="题目数量"> </el-table-column>
        <el-table-column label="操作" width="230">
          <template v-slot="{ row }">
            <el-button type="text" @click="toDirectorys(row)"
              >学科目录</el-button
            >
            <el-button type="text" @click="toTags(row)">学科标签</el-button>
            <el-button type="text" @click="editSubject(row)">修改</el-button>
            <el-button type="text" @click="delSubject(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页功能 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="q.page"
        :page-sizes="[2, 3, 5, 10]"
        :page-size="q.pagesize"
        layout="total,sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
    </el-card>
    <addDialog
      :addForm="addForm"
      :dialogVisible.sync="dialogVisible"
      @getSubjectsList="getSubjectsList"
      @closeDialog="closeDialog"
    />
  </div>
</template>

<script>
import { list, remove, detail } from '@/api/hmmm/subjects.js'
import addDialog from '../components/subjects-add'
export default {
  name: 'subjects',
  components: {
    addDialog
  },
  data () {
    return {
      // 查询表单
      form: {
        name: ''
      },
      tableData: [],
      alertText: '',
      q: {
        page: 1,
        pagesize: 10,
        subjectName: ''
      },
      total: 0,
      dialogVisible: false,
      addForm: {
        subjectName: '',
        isFrontDisplay: '1'
      }
    }
  },

  created () {
    this.getSubjectsList()
  },

  methods: {
    // 获取学科列表
    async getSubjectsList () {
      const { data: res } = await list(this.q)
      // console.log(res)
      this.tableData = res.items
      this.total = res.counts
      this.alertText = `共${res.counts}条数据`
    },

    // 每页条数改变
    handleSizeChange (val) {
      this.q.pagesize = val
      this.q.page = 1
      this.getSubjectsList()
    },

    // 当前页改变
    handleCurrentChange (val) {
      this.q.page = val
      this.getSubjectsList()
    },

    // 排列序号
    indexMethod (index) {
      return (this.q.page - 1) * this.q.pagesize + index + 1
    },

    // 搜索按钮
    onSubmit () {
      this.q.page = 1
      this.q.subjectName = this.form.name
      this.getSubjectsList()
      this.form.name = ''
    },

    // 删除学科
    delSubject (row) {
      this.$confirm('此操作将永久删除, 是否继续?', '提示', { type: 'warning' }).then(async () => {
        await remove(row)
        this.$message.success('删除成功')
        if (this.q.page > 1 && this.tableData.length === 1) {
          this.q.page--
        }
        this.getSubjectsList()
      }).catch(_ => _)
    },

    // 修改学科
    async editSubject (row) {
      this.dialogVisible = true
      const { data: res } = await detail(row)
      // console.log(res)
      this.addForm = res
      this.addForm.isFrontDisplay = this.addForm.isFrontDisplay + ''
      // console.log(this.addForm)
    },

    // 关闭弹窗
    closeDialog () {
      this.dialogVisible = false
      this.addForm = {
        subjectName: '',
        isFrontDisplay: '1'
      }
    },

    // 后台数据转化为文字
    frontDisplay (row, column, cellValue, index) {
      // console.log(row, column, cellValue, index)
      return cellValue === 1 ? '是' : '否'
    },

    // 路由跳转
    toDirectorys (row) {
      // console.log(row)
      this.$router.push({
        path: 'directorys',
        query: {
          id: row.id,
          name: row.subjectName
        }
      })
    },
    toTags (row) {
      this.$router.push({
        path: 'tags',
        query: {
          id: row.id,
          name: row.subjectName
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.box-card {
  width: 100%;
  // 头部
  .clearfix {
    display: flex;
    justify-content: space-between;
    span {
      font-size: 20px;
      font-weight: 600;
    }
    .el-input {
      width: 200px;
      margin: 0 10px;
    }
  }
  .el-alert {
    margin: 15px 0;
  }

  // 分页
  .el-pagination {
    margin: 20px 0;
    text-align: right;
  }
}
</style>
